<template>
  <div class="index">
    <div class="header">
      <h2
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: rgb(52, 69, 99);
        "
      >
        维修人员绩效
      </h2>
     
    </div>
    <div class="footer">
      <div id="container" style="min-width: 400px; height: 700px"></div>
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";

export default {
  data() {
    return {
      valuedate: "",
      value2: "",
      wixiuid:[],
      weixiunum:[],
    };
  },
  methods:{
    xuanr(){
      this.$axios({
        url:'/KeepPersonPerfor/queryKeepPersonPerfor',
        method:'post',
      }).then((res)=>{
        console.log(res);
        for(let i=0;i<res.data.data.length;i++){
          this.weixiunum.push(res.data.data[i].keepTotal);
          this.wixiuid.push(res.data.data[i].personList.pname);
        };
        for(let j=0;j<this.weixiunum.length;j++){
          this.weixiunum[j]=parseInt(this.weixiunum[j]);
         
        }
        console.log(typeof this.weixiunum[1])
          this.chart = new Highcharts.Chart("container", {
      chart: {
        type: "bar",
      },
      title: {
        text: "",
      },
      subtitle: {
        text: "",
      },
      xAxis: {
        categories: this.wixiuid,
        title: {
          text: null,
        },
      },
      yAxis: {
        min: 0,
        title: {
          text: "维修单量",
          align: "high",
        },
        labels: {
          overflow: "justify",
        },
      },
      tooltip: {
        valueSuffix: " 单",
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true,
            allowOverlap: true, // 允许数据标签重叠
          },
        },
      },
      legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "top",
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor:
          (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
          "#FFFFFF",
        shadow: true,
      },
      series: [
        {
          name: "数量",
          data: this.weixiunum,
        },
      ],
    });
        
      })
    }
    
  },
  mounted: function () {
    this.xuanr();

    
  },
};
</script>

<style scoped>
.highcharts-container {
  width: 800px;
  height: 400px;
}
.header {
  padding-top: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-input {
  width: 300px;
}
.block .el-input__inner {
  width: 300px;
}
.footer {
  height: 700px;
}
#container {
  width: 1400px;
  height: 700px;
  padding-left: 120px;
  margin-top: 100px;
}
</style>